<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>v-if 条件</h1>
        <button @click="cuccess = !cuccess">Toggle Success</button>
        <button @click="error = !error">Toggle Error</button>
        <button @click="error2 = !error2">Toggle Error2</button>

        <!-- v-if与v-else-if: 隐藏不保留标签 -->
        <p v-if="error">
            网络连接错误：404
            <p v-show="error2">严重错误！</p>
        </p>
        <p v-else-if="cuccess">网络连接成功：200</p>

        <!-- v-show/v-hide: 隐藏保留标签 -->
        <!-- <p v-show="error">网络连接错误：404</p>
        <p v-show="cuccess">网络连接成功：200</p> -->
    </div>
</body>
<script>
new Vue({
    el:"#app",
    data:{
        cuccess:false,
        error:false,
        error2:false
    },
    methods:{

    },
    computed:{

    }
});
</script>
</html>